@use './mixins' as mixins;

/**
 * WMS响应式样式
 * 适配不同屏幕尺寸的样式调整
 */

// 移动端适配 (xs: < 480px)
@include mixins.wms-respond-to(xs) {
  .wms-page {
    padding: var(--wms-spacing-md);
    
    .page-header {
      flex-direction: column;
      gap: var(--wms-spacing-md);
      text-align: center;
      
      .page-actions {
        width: 100%;
        justify-content: center;
      }
    }
  }
  
  .art-table-header {
    flex-direction: column;
    gap: var(--wms-spacing-md);
    
    .art-table-actions {
      width: 100%;
      
      .search-section {
        margin-right: 0;
        margin-bottom: var(--wms-spacing-md);
      }
      
      .action-buttons {
        justify-content: center;
        flex-wrap: wrap;
      }
    }
  }
  
  .wms-toolbar {
    flex-direction: column;
    gap: var(--wms-spacing-md);
    
    .toolbar-left,
    .toolbar-right {
      width: 100%;
      justify-content: center;
    }
  }
  
  .warehouse-page {
    .warehouse-stats {
      grid-template-columns: 1fr;
    }
  }
  
  .area-page {
    .area-layout {
      grid-template-columns: 1fr;
      
      .warehouse-tree {
        order: 2;
      }
      
      .area-content {
        order: 1;
      }
    }
  }
  
  .merchant-page {
    .merchant-filters {
      flex-direction: column;
    }
  }
  
  .item-page {
    .item-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .inventory-page {
    .inventory-overview {
      grid-template-columns: 1fr;
    }
  }
  
  .order-page {
    .order-stats {
      grid-template-columns: 1fr;
    }
  }
  
  .report-page {
    .report-charts {
      grid-template-columns: 1fr;
    }
  }
}

// 小屏幕适配 (sm: 480px - 575px)
@include mixins.wms-respond-to(sm) {
  .wms-page {
    padding: var(--wms-spacing-lg);
  }
  
  .art-table-header {
    .art-table-actions {
      flex-direction: column;
      gap: var(--wms-spacing-md);
      
      .search-section {
        margin-right: 0;
      }
    }
  }
  
  .warehouse-page {
    .warehouse-stats {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .area-page {
    .area-layout {
      grid-template-columns: 1fr;
    }
  }
  
  .merchant-page {
    .merchant-filters {
      flex-direction: column;
    }
  }
  
  .item-page {
    .item-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .inventory-page {
    .inventory-overview {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .order-page {
    .order-stats {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .report-page {
    .report-charts {
      grid-template-columns: 1fr;
    }
  }
}

// 中等屏幕适配 (md: 576px - 767px)
@include mixins.wms-respond-to(md) {
  .area-page {
    .area-layout {
      grid-template-columns: 250px 1fr;
    }
  }
  
  .item-page {
    .item-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .inventory-page {
    .inventory-overview {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .order-page {
    .order-stats {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  .report-page {
    .report-charts {
      grid-template-columns: 1fr;
    }
  }
}

// 大屏幕适配 (lg: 768px - 991px)
@include mixins.wms-respond-to(lg) {
  .area-page {
    .area-layout {
      grid-template-columns: 280px 1fr;
    }
  }
  
  .item-page {
    .item-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  .inventory-page {
    .inventory-overview {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  .order-page {
    .order-stats {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  .report-page {
    .report-charts {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

// 超大屏幕适配 (xl: 992px - 1199px)
@include mixins.wms-respond-to(xl) {
  .item-page {
    .item-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  .inventory-page {
    .inventory-overview {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

// 超超大屏幕适配 (xxl: >= 1200px)
@include mixins.wms-respond-to(xxl) {
  .item-page {
    .item-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }
  
  .inventory-page {
    .inventory-overview {
      grid-template-columns: repeat(5, 1fr);
    }
  }
}

// 表格响应式处理
.art-table {
  @include mixins.wms-desktop-first(md) {
    .el-table {
      .el-table__header,
      .el-table__body {
        min-width: 800px;
      }
    }
    
    .el-table__body-wrapper {
      overflow-x: auto;
      @include mixins.wms-scrollbar;
    }
  }
}

// 表单响应式处理
.wms-form {
  @include mixins.wms-desktop-first(md) {
    .el-form {
      .el-form-item {
        .el-form-item__label {
          text-align: left;
          width: 100% !important;
        }
        
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
    }
  }
}

// 对话框响应式处理
.wms-dialog {
  @include mixins.wms-desktop-first(md) {
    .el-dialog {
      width: 95% !important;
      margin: 5vh auto !important;
      
      .el-dialog__body {
        padding: var(--wms-spacing-lg);
      }
    }
  }
}

// 搜索表单响应式处理
.wms-search {
  @include mixins.wms-desktop-first(lg) {
    .el-form {
      .el-form-item {
        width: 100%;
        
        .el-form-item__content {
          .el-input,
          .el-select,
          .el-date-picker {
            width: 100%;
          }
        }
      }
      
      .search-actions {
        flex-direction: column;
        
        .el-button {
          width: 100%;
        }
      }
    }
  }
}

// 工具栏响应式处理
.wms-toolbar {
  @include mixins.wms-desktop-first(sm) {
    .toolbar-left {
      .toolbar-title {
        font-size: var(--wms-font-size-sm);
      }
      
      .toolbar-info {
        display: none;
      }
    }
    
    .toolbar-right {
      .el-button {
        padding: var(--wms-spacing-xs) var(--wms-spacing-sm);
        
        span {
          display: none;
        }
      }
    }
  }
}

// 分页响应式处理
.wms-pagination {
  @include mixins.wms-desktop-first(sm) {
    .el-pagination {
      .el-pagination__total,
      .el-pagination__sizes {
        display: none;
      }
      
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

// 状态标签响应式处理
.wms-status-tag {
  @include mixins.wms-desktop-first(xs) {
    font-size: 10px;
    padding: 2px 4px;
  }
}

// 卡片响应式处理
.wms-card {
  @include mixins.wms-desktop-first(sm) {
    .wms-card-header {
      padding: var(--wms-spacing-md);
      
      .wms-card-title {
        font-size: var(--wms-font-size-md);
      }
    }
    
    .wms-card-body {
      padding: var(--wms-spacing-md);
    }
    
    .wms-card-footer {
      padding: var(--wms-spacing-md);
    }
  }
}

// 按钮组响应式处理
.el-button-group {
  @include mixins.wms-desktop-first(sm) {
    display: flex;
    flex-direction: column;
    
    .el-button {
      border-radius: var(--wms-border-radius-md) !important;
      margin-bottom: var(--wms-spacing-xs);
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 面包屑响应式处理
.wms-breadcrumb {
  @include mixins.wms-desktop-first(sm) {
    .el-breadcrumb {
      .el-breadcrumb__item {
        .el-breadcrumb__inner {
          font-size: var(--wms-font-size-sm);
        }
        
        &:not(:last-child) {
          .el-breadcrumb__inner {
            @include mixins.wms-text-ellipsis;
            max-width: 80px;
          }
        }
      }
    }
  }
}

// 标签页响应式处理
.wms-tabs {
  @include mixins.wms-desktop-first(sm) {
    .el-tabs {
      .el-tabs__header {
        .el-tabs__nav-wrap {
          .el-tabs__nav {
            .el-tabs__item {
              padding: var(--wms-spacing-sm) var(--wms-spacing-md);
              font-size: var(--wms-font-size-sm);
            }
          }
        }
      }
      
      .el-tabs__content {
        padding: var(--wms-spacing-md);
      }
    }
  }
}

// 打印样式
@media print {
  .wms-page {
    padding: 0;
    background: #fff;
    
    .page-header {
      .page-actions {
        display: none;
      }
    }
  }
  
  .art-table-header {
    .art-table-actions {
      display: none;
    }
  }
  
  .wms-toolbar {
    display: none;
  }
  
  .wms-pagination {
    display: none;
  }
  
  .el-button {
    display: none;
  }
  
  .art-table {
    .el-table {
      border: 1px solid #000;
      
      .el-table__header {
        .el-table__cell {
          background: #f5f5f5 !important;
          border: 1px solid #000;
        }
      }
      
      .el-table__body {
        .el-table__cell {
          border: 1px solid #000;
        }
      }
    }
  }
}
